<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>推荐列表</title>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv="Cache-Control" content="no-transform">
		<meta name="format-detection" content="telephone=no">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" href="style/css/basic.css" />
		<link rel="stylesheet" href="style/plugin/layui/css/layui.css"  media="all">
		<script type="text/javascript" src="style/plugin/mui/js/mui.min.js"></script>
		<script type="text/javascript" src="style/js/jquery-1.8.3.min.js"></script>
		<script type="text/javascript" src="style/mockjs/dist/mock.js"></script>
		<script type="text/javascript" src="style/js/vue.min.js"></script>
		<script type="text/javascript" src="style/js/vue-resource.js"></script>
		<script type="text/javascript" src="style/js/md5.js"></script>
		<script type="text/javascript" src="style/js/basic.js"></script>

	</head>
	<style>
		.recommend_list li{
			padding: 10px 0 6px 0;
			box-sizing: border-box;
		}
		.recommend_list span{
			display: block;
			line-height: 24px;
		}
		.more{
			font-size: 14px;
			padding-right: 18px;
		}
		.mask>div{
			line-height: 36px;
			border: 1px solid #ccc;
			padding-left: 10px;
		}
		.mask p{
			line-height: 32px;
			margin-bottom: 10px;
		}
		.menban{
			position:fixed;
			width:100%;
			height:100%;
			opacity:0.6;
			background:#000;
			top:50px;
		}
		.alter_msg{
			width:70%;
			height:150px;
			position:fixed;
			top:0;
			bottom:0;
			left:0;
			right:0;
			margin:auto;
			background:#fff;
			z-index:100;
			padding:10px 15px;
			box-sizing: border-box;
		}
		.alter_msg p{
			padding:5px 0;
		}
		.alter_msg>div{
			margin-top:10px;
		}
		.alter_btn{
			padding:5px 0;
		}
		.alter_btn>button{
			float:right;
			
		}
		.ensure_btn{
			background:#007AFF;
			color:#fff;
			padding:4px 10px;
			margin-right:10px;
		}
		.cancel_btn{
			border:1px solid #DCDCDC;
			padding:4px 10px;
			box-sizing: border-box;
		}
		.alter_inpt>input{
			border:1px solid #ccc;
			height:40px;
			width:100%;
			padding-left:10px;
			box-sizing: border-box;
		}
	</style>

	<body>
		<div id="rec_mag">
			<!--header-->
			<div id="header">
				<h1>推荐列表</h1>
				<span class="backicon"></span>
			</div>
			<!--content-->
			<div class="body" id="refreshContainer"> 
				<ul class="recommend_list list">
					<li class="nextArrow" @tap="jumpRecdel(index)" v-for="(rec,index) in recomandList" v-if="recomandList!=''">
						<a href="javascript:;">
							<div class="fl">
								<span>{{rec.name}}</span>
								<span class="gray">{{rec.phone}}</span>
							</div>
							<div class="fr more">
								<span style="color: #ff9500;text-align: right;" @tap.stop="selagent(index)">{{rec.status}}</span>
								<div>
									工单号：{{rec.form_no}}
								</div>
							</div>
						</a>
					</li>
					<!--<li class="nextArrow">
						<a href="##">
							<div class="fl">
								<span>销售员</span>
								<span class="gray">13856784356</span>
							</div>
							<div class="fr more ordering" style="color: #ff9500;" data-method="notice" >
								选择经销商
							</div>
						</a>
					</li>
					<li class="nextArrow">
						<a href="recommend_list_info.html">
							<div class="fl">
								<span>推荐人</span>
								<span class="gray">13856784356</span>
							</div>
							<div class="fr more">
								已下单
							</div>
						</a>
					</li>-->
				</ul>
			</div>
			<div class="alter_msg" v-if="flag==1">
				<p>请填写经销商信息</p>
				<div class="alter_inpt"><input type="text" placeholder="请输入经销商手机号或昵称" v-model="agentMsg"/></div>
				<div class="alter_btn"><button class="cancel_btn" @tap="cancelAgent">取消</button><button class="ensure_btn" @tap="ensureAgent">确定</button></div>
			</div>
			<div class="menban" v-if="flag==1"></div>
		</div>
		
	</body>
	<script>
//		layui.use('layer', function() {
//			var $ = layui.jquery,
//			layer = layui.layer;
//			var active = {
//				notice: function(){
//				    layer.open({
//				    	shade: 0.6,
//				    	title:false,
//				    	closeBtn: false,
//						anim: 'up',
//						content: '<div class="mask"><p>请填写经销商信息</p><div><input type="text" placeholder="请输入经销商手机号或昵称"></div></div>',
//						btn: ['确认', '取消'],
//						success:function(layero){
//							console.log(layero)
//							var btn = layero.find('.layui-layer-btn');
//							btn.find('.layui-layer-btn0').attr({
//					            href: 'refuse-order.html',
////					            target: '_blank'
//					        });
//						}
//					});
//
//			   }
//	
//			}
//		 	$('.ordering').on('click', function() {
//				var othis = $(this),
//				method = othis.data('method');
//				active[method] ? active[method].call(this, othis) : '';
//			});
//		})
		new Vue({
			el:"#rec_mag",
			data:{
				recomandList:"",
				flag:0,
				formno:"",
				agentMsg:"",
				idx:""
			},
			methods:{
				jumpRecdel:function(rIndex){
					openurl_can("recommend_list_info",this.recomandList[rIndex].form_no)
				},
				selagent:function(sIndex){
					if(this.recomandList[sIndex].status=="选择经销商"){
					    this.flag=1
					    this.formno=this.recomandList[sIndex].form_no
					    this.idx=sIndex
					}	
				},
				ensureAgent:function(){
					this.$http.post(domain+"/recommend_form/setAgent?t="+this.ticket+"&sign="+this.sign,{
						form_no:this.formno,
						keyword:this.agentMsg
					},{emulateJSON:true}).then(
			            function (res) {
			                // 处理成功的结果  
			                if(res.body.code==1){
			                    mui.toast(res.body.msg)
//			                    this.recomandList[this.idx].status="已下单"
			                    this.flag=0;
//			                    alert(this.flag)
			                }else{
			                	mui.toast(res.body.msg)
			                }
			            },function (res) {
			            // 处理失败的结果
			            console.log(res) 
			            }
			        )
				},
				cancelAgent:function(){
					this.flag=0;
				}
			},
			created:function(){
				var that=this;
				var p=1;
		        mui.plusReady(function(){
					mui.init({
					  pullRefresh : {
					    container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
					    down : {
					      style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
					      color:'#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
					      height:'50px',//可选,默认50px.下拉刷新控件的高度,
					      range:'100px', //可选 默认100px,控件可下拉拖拽的范围
					      offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
					      contentdown:null,
					      auto: true,//可选,默认false.首次加载自动上拉刷新一次
					      callback :pullrefesh  	      
					    }
					  }
					}); 
				})
				function pullrefesh(){
					that.$http.post(domain+"/recommend_form/getList?t="+that.ticket+"&sign="+that.sign,{
						page_id:p++,
					    page_size:2
					},{emulateJSON:true}).then(
			            function (res) {
			                // 处理成功的结果
			                if(res.body.code==1){
			                  console.log(res.body)
			                  if(res.body.data.list.length==0){
				                	mui.toast("没有更多了")
				                	return false; 
				                }
			                  for(var i in res.body.data.list){
			                  	if(res.body.data.list[i].status==0){
			                  		res.body.data.list[i].status="选择经销商"
			                  	}else if(res.body.data.list[i].status==-1){
			                  		res.body.data.list[i].status="已忽略"
			                  	}else if(res.body.data.list[i].status==-99){
			                  		res.body.data.list[i].status="全部" 
			                  	}else if(res.body.data.list[i].status==1){
			                  		res.body.data.list[i].status="已下单" 
			                  	}
			                  }
			                  that.recomandList=res.body.data.list;    
			                }else{
			                	mui.toast("暂无推荐")
			                }
			            },function (res) {
			            // 处理失败的结果 
			            console.log(res) 
			            }
			        ).then(function(){
			        	mui('#refreshContainer').pullRefresh().endPulldownToRefresh();   
			        });
					
				}
			},
			mounted:function(){
				
			}
		})

	</script>

</html>